﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<QuickVal.Models.Widget>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>CreateMany</title>
    <!--// Minimal common scripts ////////////////////-->
    <script src="/Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
    <!--// Roundtrip validation ////////////////////-->
    <link href="/Content/roundtrip.validation.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/roundtrip.validation.js" type="text/javascript"></script>
    <!--// Scripts for dynamic UI ////////////////////-->
    <script src="/Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>    
    <script type="text/javascript">
        $(document).ready(function () {
            // Dynamically add a new form widget when clicked
            $('a.add-widget', $('#mvc-ajax-page')[0]).live('click', function () {
                $.ajax({
                    url: '/Widget/AddWidget',
                    cache: false,
                    success: function (html) {
                        $('#widgets').append(html);
                        return false;
                    }
                });
                return false;
            });
            // Remove the widget when its link is clicked
            $('a.remove-widget', $('#mvc-ajax-page')[0]).live('click', function () {
                if (confirm('Are you sure you wish to remove this widget?')) {
                    $(this).parents('div.widget:first').remove();
                }
                return false;
            });
            // Allow widgets to be sortable, positioned here since sortable has no .live binder
            $('div.handle', $('#mvc-ajax-page')[0]).live('mouseover', function () {
                $('#widgets').sortable({
                    // axis: 'y',
                    handle: '.handle'
                });
                return false;
            });
        });    
    </script>
</head>
<body id="mvc-ajax-page">
    <% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "mvc-ajax-page" } )) { %>
        <%: Html.ValidationSummary(true)%>
        
        <h4><%: TempData["Message"]%></h4>

        <fieldset>
            <legend>Fields</legend>
            <div id="widgets">
            <% foreach (var widget in Model)
                { %>
                <% Html.RenderPartial("Widget", widget); %>
            <% } %>
            </div>
            <p>
                <a href="javascript:;" class="add-widget">Add Widget</a>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    <% } %>
</body>
</html>
